<!-- 一周项目一览表 -->
<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">保管员工作量汇总</block></cu-custom>
		<view class="qiun-charts" >
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			<!--#endif-->
		</view>
		<view class="margin-top">
		   <form>
		   	<view class="cu-form-group">
		   		<button class='cu-btn shadow' :class="cfmYear>0?'bg-green':'bg-gradual-grey'" @tap="queryClick(1)">年</button>
		   		<button class='cu-btn shadow' :class="cfmMonth>0?'bg-green':'bg-gradual-grey'" @tap="queryClick(2)">月</button>
		   		<button class='cu-btn shadow' :class="cfmDay>0?'bg-green':'bg-gradual-grey'" @tap="queryClick(3)">日</button>
		   	</view>
		   </form>
		</view>
		<view class="margin-top">
		   <z-table :tableData='tableData' :columns='columns' :tableHeight="1000"></z-table>
		</view>
	</view>
</template>

<script>
	import {
		formatDateDay
	} from '@/utils/datetime.js'
	import {
		mapGetters
	} from 'vuex'
	import zTable from "@/components/z-table/z-table.vue"
	import uCharts from '@/common/lib/u-charts.min.js'
	var _self
	var canvaLineA=null
	export default {
		components: {
			zTable
		},
		computed: mapGetters(['user']),
		data() {
			return {
				tableData:[],
				columns:[
					{ title:'序号',key:'index',width: 90 },
					{ title:'年',key:'cfmYear',width: 100 },
					{ title:'月',key:'cfmMonth',width: 100  },
					{ title:'日',key:'cfmDay',width: 100  },
					{ title:'重量',key:'workAmt',width: 180  },
					{ title:'金额',key:'sumMoney',width: 180  }
				],
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				cfmYear:1,
				cfmMonth:0,
				cfmDay:0,
				workerName:''
			}
		},
		onLoad() {
			this.getTableData()
			
			_self = this
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750)
			this.cHeight=uni.upx2px(500)
		},
		methods: {
			getTableData(){	
				uni.showLoading({
					title: '正在查询数据...'
				})
				const params = {
					cfmYear: this.cfmYear,
					cfmMonth: this.cfmMonth,
					cfmDay: this.cfmDay,
					workerName: this.user.name			 
				  }
				this.$minApi.getTallyClerkNameWorkAmtSum(params).then(res => {
					const data = res
					if (data) {
						data.forEach( (item, index) => item.index = (index +1))
					}
					this.tableData = data
					this.getServerData()
				}).catch(err => {
					console.log(err)
					// 隐藏加载状态
					uni.hideLoading()
				})
			},			
			getServerData(){
				// '作业量'
				let categories = []
				let series = [{
							name: '作业量',
							data: []
						}]
				
				if(this.cfmYear>0) {
					this.tableData.forEach( item => {
						var index = categories.indexOf(item.cfmYear+'年')
						if(index>-1){
							series[0].data[index]+=item.workAmt
						}else{
							categories.push(item.cfmYear+'年')
							series[0].data.push(item.workAmt)
						}
					})

				} else if(this.cfmMonth>0) {
					this.tableData.forEach( item => {
						var index = categories.indexOf(item.cfmMonth+'月')
						if(index>-1){
							series[0].data[index]+=item.workAmt
						}else{
							categories.push(item.cfmMonth+'月')
							series[0].data.push(item.workAmt)
						}
					})
				} else if(this.cfmDay>0) {
					this.tableData.forEach( item => {
						var index = categories.indexOf(item.cfmDay+'日')
						if(index>-1){
							series[0].data[index]+=item.workAmt
						}else{
							categories.push(item.cfmDay+'日')
							series[0].data.push(item.workAmt)
						}
					})
				}
				
				let LineA={categories:[],series:[]}
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
								
			    LineA.categories=categories
				LineA.series=series
				_self.showLineA("canvasLineA",LineA)
				
				// 隐藏加载状态
				uni.hideLoading()

			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'吨'}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				})
			},
			queryClick(type) {
				if(type === 1){
					this.cfmYear = 1
					this.cfmMonth = 0
					this.cfmDay = 0
				}
				else if(type === 2){
					this.cfmYear = 0
					this.cfmMonth = 1
					this.cfmDay = 0
				}
				else if(type === 3){
					this.cfmYear = 0
					this.cfmMonth = 0
					this.cfmDay = 1
				}
				this.getTableData()
			},
			backedPage() {
				uni.redirectTo({
					url: `/pages/analysis/index`
				})
			}
		}
	}
</script>

<style>
	/* .project-list+.project-list {
		margin-top: 2rpx !important;
	} */
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
